<template>
  <div class="container">

    <el-col :span="16" style="text-align:right;">
      <div class="div-left">
        <span class="demonstration">时间</span>
        <el-date-picker
          v-model="userTime"
          type="month"
          @change="userValue"
          value-format="yyyy-MM"
          placeholder="选择月">
        </el-date-picker>
      </div>
    </el-col>
    <div class="left">
      <el-col :span="16">
        <div style="height:100%;width:100%">
          <div id="deptChart0" :style="{width: '500px',height: '500px'}"></div>
        </div>
      </el-col>
    </div>
    <div class="middle">
      <el-col :span="16">
        <div style="height:100%;width:100%">
          <div id="deptChart1" :style="{width: '500px',height: '500px'}"></div>
        </div>
      </el-col>
    </div>
    <div class="right">
      <el-col :span="16">
        <div style="height:100%;width:100%">
          <div id="deptChart2" :style="{width: '500px',height: '500px'}"></div>
        </div>
      </el-col>
    </div>
  </div>

</template>

<script>

  export default {
    data() {
      return {
        userTime: ''
      }
    },
    components: {},
    created() {
      this.getDeptChart0 ()
      this.getDeptChart1 ()
      this.getDeptChart2 ()

    },
    methods: {
      getDeptChart0() {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('deptChart0'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '人员得分'
            },
            tooltip: {},
            legend: {
              data: ['得分']
            },
            xAxis: {
              data: ['刘桑', '刘桑1', '刘桑2', '刘桑3'],
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '45'
              }
            },
            yAxis: {},
            series: [{
              name: '得分',
              type: 'bar',
              data: [1, 2, 3, 4]
            }],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption (option)
        })

      },
      getDeptChart1() {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('deptChart1'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: '人员得分'
            },
            tooltip: {},
            legend: {
              data: ['得分']
            },
            xAxis: {
              data: ['刘桑', '刘桑1', '刘桑2', '刘桑3'],
              axisLabel: {
                //  X 坐标轴标签相关设置
                interval: 0,
                rotate: '45'
              }
            },
            yAxis: {},
            series: [{
              name: '得分',
              type: 'bar',
              data: [1, 2, 3, 4]
            }],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }
          }
          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption (option)
        })

      },
      getDeptChart2() {
        this.$nextTick (() => {
          var myChart = this.$echarts.init (document.getElementById ('deptChart2'))
          // 指定图表的配置项和数据
          var option = {
            title: {
              text: 'Referer of a Website',
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ],
            toolbox: {//echart保存为图片
              show: true,
              feature: {
                mark: {
                  show: true
                },
                restore: {
                  show: true
                },
                saveAsImage: {
                  show: true,
                  pixelRatio: 1,
                  title: '保存为图片',
                  type: 'png',
                  lang: ['点击保存']
                }
              }
            }

          }
          myChart.setOption (option)
        })
      },
      userValue() {

      }
    }
  }
</script>
<style>
  .container {
    display: flex;
  }

  .left {
    flex: 1;
  }

  .middle {
    flex: 2; /* 中间内容占据两倍宽度 */
  }

  .right {
    flex: 1;
  }
</style>
